<template>
    <div class="container content-field">
        <div class="card">
            <div class="card-header head">
                <span class="head1"> 留言板 </span>
                <span class="head2">  <button  @click="new_info" type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#exampleModal">留言</button> </span>

                <div  class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="exampleModalLabel">留言</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                       <form>
                            <div class="mb-3">
                                <textarea v-model="news" class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                            </div>
                            <div class="em">{{ error_message }}</div>
                       </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                        <button type="button" @click="new_add" class="btn btn-primary">发布</button>
                    </div>
                    </div>
                </div>
                </div>
            </div>
            <div class="card-body">
                <slot></slot>
            </div>
        </div>
    </div>
</template>

<script>
import $ from "jquery";
import { ref } from "vue";
import { useStore } from "vuex";
import { Modal } from 'bootstrap/dist/js/bootstrap';
export default{
    setup(){
        const store = useStore();
        let news = ref("");
        let error_message = ref("");
        const new_add  = ()=>{
            error_message.value = '';
            $.ajax({
                url:"http://localhost:3000/api/take/add/",
                type:"post",
                headers:{
                    Authorization: "Bearer "+store.state.user.token,//授权 
                    //Authentication 认证  
                },
                data:{
                    take:news.value,
                },
                success(resp){
                    if(resp.error_message === 'success'){
                        Modal.getInstance('#exampleModal').hide();
                    }
                    else{
                        error_message.value = resp.error_message;
                    }
                }
             })
         }

    
        return{
            news,
            error_message,
            new_add,
        }  
    
    }
}


</script>

<style scoped>
div.content-field{
    margin-top: 20px;
  
}
.card-body{
    background-image: url("../assets/homeBackimg.jpg");
}

.head{
    height: 60px;
   
}
.head1{
    font-family:Arial,'宋体';
    margin-left: 40px;
    font-size: 30px;
    line-height: 44px;
    font-weight: 700;
}

.head2{
    font-family:Arial,'宋体';
    margin-left: 790px;
    
}
.btn-success{
    width: 100px;
    height: 40px;
    margin-top: 5px;
    margin-bottom: 20px;
}
.em{
    margin-top: 10px;
    color: red;
}

</style>